<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Adger Admin</title>
  <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/admin/dist/img/myimg/icon.jpg" type="image/x-icon">
  <script src="${pageContext.request.contextPath}/static/admin/dist/js/jquery3.5.1.min.js"></script>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/dist/css/adminlte.min.css">
  <style>
    /* 外层阴影 */
    .modal{
      display: none;
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1000;
      background-color: rgba(0,0,0,0.5);
    }
    .modal-content{
      width: 250px;
      height: 79px;
      max-width: 700px;
      max-height: 500px;
      margin: 200px auto;
      border-radius:10px;
      background-color:#fff;
      -webkit-animation: zoom 0.6s;
      animation: zoom 0.6s;
      overflow: auto;
    }
    @-webkit-keyframes zoom{
      from {-webkit-transform: scale(0)}
      to {-webkit-transform: scale(1)}
    }
    @keyframes zoom{
      from {transform: scale(0)}
      to {transform: scale(1)}
    }

    .close{
      color: #b7b7b7;
      font-size: 30px;
      font-weight: bold;
      margin-right: 20px;
      transition: all 0.3s;
      cursor: pointer;
    }
    .content{
      display: block;
      width: 139px;
      height: 20px;
      position: relative;
      top: -1px;
      left: 76px;
      text-align: center;
    }
  </style>
</head>
<body class="login-page">
<div class="login-box">
  <div class="login-logo">
    <b>Adger</b>后台管理系统
  </div>
  <div class="card">
    <div class="card-body login-card-body">
      <p class="login-box-msg">提示信息</p>
      <%-- 放置的后台地址 --%>
        <div class="input-group mb-3">
          <input type="userName" class="form-control" placeholder="请输入用户名" id="username">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-envelope"></span>
            </div>
          </div>
        </div>
        <div class="input-group mb-3">
          <input type="password" class="form-control" placeholder="请输入密码" id="pwd">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-8">
            <div class="icheck-primary">
              <input type="checkbox" id="remember">
              <label for="remember">
                记住我
              </label>
            </div>
          </div>
          <div class="col-4">
            <button type="button" class="btn btn-primary btn-block" onclick="login()">登录</button>
          </div>
        </div>
    </div>
  </div>
</div>
<%-- 模态框区域--%>
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">X</span>
    <font class="content" id="con"></font>
  </div>
</div>
<%-- 正则表达式跟 ajax提交 --%>
<script>
  //模态框区域
  var btn = document.getElementById('showModel');
  var close = document.getElementsByClassName('close')[0];
  var modal = document.getElementById('modal');
  close.addEventListener('click', function(){
    modal.style.display = "none";
  });
  /* 登录 方法的 异步 ajax*/
  function login() {
    var username = $("#username").val();
    var password = $("#pwd").val();

    if(username == '' || username == 'undefined'){
      modal.style.display = "block";
      $(".content").html("请输入用户名");
      return;
    }
    if(password == '' || password == 'undefined'){
      modal.style.display = "block";
      $(".content").html("请输入密码");
      return;
    }
    $.ajax({
      url:'login/adminLogin',
      data:{"username":username,"password":password},
      type:'POST',
      dataType:"json",
      success:function(data){
        if(data.success == true){
          window.location.href="login/home"
        }else{
          modal.style.display = "block";
          $(".content").html(data.message);
        }
      }
    });
  }
</script>
</body>
</html>
